<template>
  <div class="mine-container">
    <myNavbar title="收货地址"></myNavbar>
    <scroll-view style="flex:1">
    <div v-for="(item,index) in addressInfo" :key="index"  @click="toAddress(item)">
      <div class="mine-list " bubble="true" >
        <div class="address-left">
          <div class="address-left-info">
              <div class="address-left-tag-inner" v-if="item.isDefault">
                <text class="addrsss-left-tag">默认</text>
              </div>
            <div>
              <text class="address-left-name">{{item.consignee}}</text>
            </div>
            <div>
              <text class="address-left-mobile">{{item.phone}}</text>
            </div>
          </div>
          <div>
            <text class="address-left-detail">{{item.address}}</text>
          </div>
        </div>
        <div class="address-right" @click="editAddress(item.id)">
          <text class="title2">&#xe631;</text>
        </div>
      </div>
    </div>
    </scroll-view>
    <div class="mine-list-button">
      <div class="btn address-list-button br-16" @click="addAddress">
        <text class="address-title">添加收货地址</text>
      </div>
    </div>
  </div>
</template>
<script>
import { list } from "../../../api/address";
import myNavbar from "../../../components/myNavbar/myNavbar.vue";
const storage = weex.requireModule('storage')
export default {
  name: "address",
  data() {
    return {
      addressInfo: [],
      type: "",
	  memberId: '',
      addresstype:false
    };
  },
  created() {
      var _this = this
    // 在实例创建完成后被立即调用
    this.memberId = app.config.params.memberId;
    this.addressListRequest();
    this.initIconFont();
      if (app.config.params.addressType !=null){
          this.addresstype = app.config.params.addressType;
      }
  },
  methods: {
    //添加收货地址的事件
    addAddress() {
      eeui.openPage({
        pageName:"addressEdit",
        url: "root://pages/member/addressEdit/addressEdit.js",
        params: { type: "add", memberId: this.memberId },
        statusBarType: "immersion",
      },(res)=>{
          if(res.status == "destroy" && res.pageName == "addressEdit"){
                        this.addressListRequest()
          }
      }
      )
    },
    addressListRequest() {
      list({memberId:this.memberId})
        .then((res) => {
          if (res.type == "success") {
            if (res.data.data.length > 0) {
                let addressInfo = []
              res.data.data.map((item) => {
                let addressInfoItem = {};
                addressInfoItem.id = item.id;
                addressInfoItem.address = item.address;
                addressInfoItem.areaName = item.areaName;
                addressInfoItem.building = item.building;
                addressInfoItem.roomNumber = item.roomNumber;
                addressInfoItem.isDefault = item.isDefault;
                addressInfoItem.phone = item.phone;
                addressInfoItem.lat = item.lat;
                addressInfoItem.lng = item.lng;
                addressInfoItem.memberId = item.memberId;
                addressInfoItem.consignee = item.consignee;
                addressInfo.push(addressInfoItem);
              });
              this.addressInfo = addressInfo
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //编辑收货地址的事件
    editAddress(id) {
      let addressDetail = {};
      if (this.addressInfo.length > 0) {
        this.addressInfo.map((item) => {
          if (item.id == id) {
            addressDetail = item;
          }
        });
      }
      eeui.openPage({
          pageName:"addressEdit",
        url: "root://pages/member/addressEdit/addressEdit.js",
        params: { type: "edit", data: addressDetail},
        statusBarType: "immersion"
      },
      (res)=>{
          if(res.status == "destroy" && res.pageName == "addressEdit"){
                        this.addressListRequest()
          }
      });
    },
      toAddress(item){
          if (this.addresstype == true){
              eeui.closePage()
              storage.setItem('addressList', JSON.stringify(item), event => {

              })
          }
      }
  },
  components: { myNavbar },
};
</script>

<style scoped>
@import url("../../../style/wx.css");

.mine-container {
  flex: 1;
  background-color: rgba(248, 248, 248, 1);
}

.navbar {
  width: 750px;
  height: 100px;
  margin-bottom: 20px;
}
.title2 {
  color: gray;
  font-size: 36px;
  font-family: iconfont2;

  color: #cccccc;
}

.mine-list-out{
border-color: rgba(0, 0, 0, 0.1);
  border-style: solid;
  border-width: 1px;

}

.mine-list {
  padding-bottom: 30px;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16px;
  border-color: rgba(0, 0, 0, 0.1);
  border-style: solid;
  border-width: 1px;
  display: flex;
  padding-top: 30px;
  padding-left: 30px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.address-left {
  font-size: 28px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
}

.address-left-info {
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}


.address-left-tag-inner {
    border-style: solid;
    border-color: rgba(231, 91, 83, 1);
    border-width: 2px;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    border-radius: 1px;
}

.addrsss-left-tag {
    height: 30px;
    padding: 0 5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    background-color: rgba(231, 91, 83, 1);
    opacity: 0.6;
    color: rgba(255, 242, 219, 1);
    text-shadow: 1px 1px 0px rgba(131, 101, 59, 0.2);
}
.address-left-detail {
  font-size: 24px;
  width: 550px;
}
.address-left-name {
  margin-right: 20px;
  font-size: 32px;
  font-weight: 500;
  color: rgba(26, 26, 30, 1);
}

.address-left-mobile {
  font-size: 28px;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  opacity: 0.5;
}

.address-right {
  padding-right: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 56px;
  height: 100%;
}

.address-icon {
  color: #7e8088;
  font-size: 32px;
}

.mine-list-button {
  align-items: center;
  justify-content: center;
}

.address-list-button {
  margin: 20px 0;
  padding: 0;
  border-radius: 16px;
  width: 710px;
  height: 82px;
  text-align: center;
  background-color: #409EFF;
  justify-content: center;
  align-items: center;
  line-height: 82px;
}

.address-title {
  color: white;
  font-family: PingFangSC;
  font-weight: bold;
  font-size: 28px;
}



.address-gap {
  height: 120px;
}
</style>
